<template>
  <view class="container">
    <view class="container">
      <!-- 轮播图区域 -->
      <swiper indicator-dots circular>
        <swiper-item>
          <image src="/static/index1.jpg"></image>
        </swiper-item>
      </swiper>

      <view class="part" @tap="gotoquickClick">
        <view class="part1">
          <view class="left">
            <text class="big">绿箱|GO\n</text>
            <text class="small">提高快递箱回收量</text>
          </view>
          <view class="right">
            <image src="/static/jiantou.png"></image>
          </view>
        </view>
        <image src="/static/index2.jpg"></image>
      </view>
      <view class="part" @tap="gotostory">
        <view class="part2">
          <view class="left">
            <text class="big">绿箱故事\n</text>
            <text class="small">记录绿箱故事\n</text>
            <image src="/static/jiantou.png"></image>
          </view>
          <view class="right2">
            <image src="/static/index3.jpg"></image>
          </view>
        </view>
      </view>
      <navigator open-type="navigateTo" url="/pages/story/story1?key=https://mp.weixin.qq.com/s/ivRneLvkzSy9lVY7p650SQ">
        <view class="part">
          <!-- @tap="gotoknow" -->
          <view class="part2">
            <view class="right3">
              <image src="/static/index4.jpg"></image>
            </view>

            <view class="left">
              <text class="big">回收须知\n</text>
              <text class="small">了解回收流程\n</text>
              <image src="/static/jiantou.png"></image>
            </view>
          </view>
        </view>
      </navigator>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        href: 'https://uniapp.dcloud.io/component/README?id=uniui'
      }
    },
    methods: {
      gotostory: function() {
        uni.navigateTo({
          url: '/pages/story/story',
        })
      },
      gotoquickClick() {
        uni.switchTab({
          url: '/pages/quickClick/quickClick',
        })
      }
    }
  }
</script>

<style>
  .container {
    margin: 30rpx 35rpx 30rpx 30rpx;
  }

  swiper {
    height: 800rpx;
  }

  swiper image {
    width: 100%;
    height: 100%;
  }

  image {
    border-radius: 10rpx;
  }

  .part {
    margin: 40rpx 0 30rpx 0;
  }

  .part image {
    width: 100%;
    /* height: 100%; */
  }

  text {
    /* margin: 30rpx 0 30rpx 0; */
    line-height: 60rpx;
  }

  .part1,
  .part2 {
    /* height: 400rpx; */
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }

  .right image,
  .part2 image {
    height: 60rpx;
    width: 60rpx;
    margin-top: 10rpx;
    margin-right: 20rpx;
  }

  .right2 image {
    height: 180rpx;
    width: 300rpx;
  }

  .right3 image {
    height: 200rpx;
    width: 400rpx;
  }

  .big {
    font-weight: 600;
    font-size: larger;
  }

  .small {
    font-size: smaller;
  }
</style>
